// useEffect()

import React, { useEffect, useState } from "react";
// useEffect:
// - Effect Hook 可以让你在函数组件中执行副作用操作
// - Effect可以告诉 React 组件需要在挂载完成、更新完成、卸载前执行某些操作
export default function App() {
  const [count, setCount] = useState(0)
  const [isHot, setIsHot] = useState(true);


  // - useEffect接受第一个参数是一个回调函数,当达到条件的时候,会触发当前的回调函数
  // - useEffect接受第二个参数是一个数组


  // 1.  - 数组中传入state,则当前state发生改变的时候触发当前effect中的回调函数
  useEffect(() => {
    console.log('useEffect执行了');
  }, [isHot, count])
  useEffect(() => {
    console.log('isHot执行了');
  }, [isHot])
  useEffect(() => {
    console.log('count执行了');
  }, [count])


  // 2.- 如果传递的是一个空数组,则useEffct回调函数只有在初始化阶段才执行
  useEffect(() => {
    console.log('isHot执行了');
  }, [])
  useEffect(() => {
    console.log('count执行了');
  }, [])


  // 3.  - 如果不传递第二个参数,则无论初始化还是更新的时候都会执行
  useEffect(() => {
    console.log('isHot执行了');
  })
  useEffect(() => {
    console.log('count执行了');
  })


  return (
    <div>
      <h1>count的值是{count}</h1>
      {/* <button onClick={changeCountHandle} >累加</button> */}
      {/* 如果事件函数比较简单的时候可以不用单独写出来,放在元素中即可 */}
      <button onClick={() => { setCount(count + 1) }}>累加</button>

      <hr />

      <h2>今天天气真{isHot ? '晴朗' : '阴沉'}</h2>
      <button onClick={() => { setIsHot(!isHot) }}>修改天气</button>
    </div>
  )
}